<script setup>
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
import { reactive, ref } from 'vue'
import { getPermision, addRole, getRoleId, changeRole } from '@/api/role.js'
import { hint } from '@/hooks/hint.js'
const { msg } = hint()
const router = useRouter()
const route = useRoute()
const progress = ref(0) // 进度条
const Permision = ref([]) // 树
const id = ref(route.query.id)
// 返回
const Back = () => {
  router.go(-1)
}
// 下一步
const nextStep = () => {
  if (!formRole.roleName) return msg('error', '角色名称不能为空!')
  if (
    progress.value === 1 &&
    formRole.perms.every((item) => item.length === 0 || item.every((item1) => item1.length === 0))
  ) {
    return msg('error', '请至少勾选一项权限!')
  }
  progress.value++
}
// 立即执行 数据回显示
if (id.value) {
  ;(async function () {
    // 权限选项
    const res = await getRoleId(id.value)
    formRole.roleName = res.data.roleName
    formRole.remark = res.data.remark
    formRole.perms = res.data.perms
    // PickOn.value = res.data.perms
    console.log(res, '选项li')
    // getRoleusers()
  })()
}
// 获取树
;(async () => {
  const res2 = await getPermision()
  Permision.value = res2.data
})()
// 提交
const formSubmit = async () => {
  try {
    if (id.value) {
      const res = await changeRole({ ...formRole, roleId: id.value })
      msg('success', '添加' + res.msg)
    } else {
      const res = await addRole(formRole)
      msg('success', '添加' + res.msg)
    }
    router.push('/system/rolemanage')
  } catch (e) {
    msg('error', e.response?.data?.msg)
  }
}
// form
const formRole = reactive({
  roleName: '',
  remark: '',
  perms: [[], [], [], [], []]
})
</script>
<template>
  <div class="box">
    <!-- nav -->
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240); user-select: none; background-color: #fff"
      @back="Back"
    >
      <template #title>
        <span
          style="
            font-size: 16px;
            font-weight: 400;
            padding-right: 8px;
            border-right: 1px solid rgb(146, 143, 143);
          "
          @click="Back"
          >返回</span
        >
      </template>
      <template #extra>
        <span style="font-size: 16px">黑马程序员</span>
      </template>
      <template #subTitle>
        <span style="font-size: 16px; font-weight: 500; color: #000; height: 100%">{{
          id ? '编辑角色' : '添加角色'
        }}</span>
      </template>
    </a-page-header>
    <!-- 进度条 -->
    <a-row>
      <a-col :span="5" :xs="8" :lg="4" class="jdt">
        <a-steps progress-dot :current="progress" direction="vertical">
          <a-step title="角色信息" />
          <a-step title="权限信息" />
          <a-step title="检查并完成" />
        </a-steps>
      </a-col>
      <a-col :span="19" :xs="16" :lg="20" class="role">
        <!-- 角色信息 -->
        <div class="top" v-if="progress === 0">
          <p>角色信息</p>
          <a-form
            :model="formRole"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 16 }"
            autocomplete="off"
          >
            <a-form-item
              label="角色信息"
              name="roleName"
              :rules="[{ required: true, message: '请输入角色名称!', trigger: 'blur' }]"
            >
              <a-input v-model:value="formRole.roleName" placeholder="请输入" />
            </a-form-item>

            <a-form-item label="角色描述" name="remark">
              <a-textarea v-model:value="formRole.remark" placeholder="请输入" />
            </a-form-item>
          </a-form>
        </div>
        <!-- 权限信息 -->
        <div class="root" v-else>
          <p>权限配置</p>
          <div class="root-box" v-if="progress === 2">
            <a-descriptions :column="1">
              <a-descriptions-item label="角色名称">{{ formRole.roleName }}</a-descriptions-item>
              <a-descriptions-item label="角色描述">{{ formRole.remark }}</a-descriptions-item>
              <a-descriptions-item label="角色权限"></a-descriptions-item>
            </a-descriptions>
          </div>
          <a-row class="root-row">
            <a-col span="8" class="root-col" v-for="(item, index) in Permision" :key="item.id">
              <span class="span-a"> {{ item.title }} </span>
              <a-tree
                :selectable="false"
                :default-expand-all="true"
                checkable
                :disabled="progress === 2"
                :tree-data="item.children"
                :fieldNames="{ key: 'id' }"
                v-model:checked-keys="formRole.perms[index]"
              >
                <template #title="{ title, key }">
                  <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
                  <template v-else>{{ title }}</template>
                </template>
              </a-tree>
            </a-col>
          </a-row>
        </div>
        <!-- end -->
      </a-col>
    </a-row>
    <!-- btn -->
    <div class="btmbtn">
      <a-button @click="progress--" v-if="progress !== 0">上一步</a-button>
      <a-button type="primary" @click="nextStep" v-if="progress < 2">下一步</a-button>
      <a-button type="primary" v-if="progress === 2" @click="formSubmit">{{
        id ? '保存' : '确定添加'
      }}</a-button>
    </div>
  </div>
</template>
<style scoped lang="less">
.box {
  background-color: #f4f6f8;
  width: 100vw;
  height: 100vh;
  // overflow: hidden;
}
.jdt {
  // background-color: pink;
  padding: 20px;
  // min-width: 210px;
  height: 100%;
}
::v-deep .role {
  padding: 20px;
  // min-width: 20px !important;
  // background-color: forestgreen;
  p {
    border-left: 2px solid #0960bd;
    padding: 0 5px;
    display: inline-block;
  }
  .top {
    width: 80%;
  }
}
.btmbtn {
  width: 200px;
  display: flex;
  justify-content: space-evenly;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
.root {
  width: 70%;
  padding: 20px;
  // background-color: forestgreen;
  .root-row {
    text-align: center;
    margin-top: 20px;
    .root-col {
      height: 400px;
      &:nth-child(2),
      &:nth-child(5) {
        border-left: 1px solid #e4e7ec;
        border-right: 1px solid #e4e7ec;
      }
    }
  }
}
.span-a {
  width: 100%;
  height: 22px;
  padding: 10px 0;
  background-color: #f5f7fa;
  display: inline-block;
  box-sizing: content-box;
  text-align: center;
  line-height: 22px;
}
.root-box {
  padding-left: 70px;
}
</style>
